<template>
  <div class="iconify-demo">
    <a-card title="Iconify 图标示例" class="demo-card">
      <div class="icon-section">
        <h3>🔍 搜索图标对比</h3>
        <div class="icon-comparison">
          <div class="icon-item">
            <h4>Ant Design 图标</h4>
            <SearchOutlined style="font-size: 24px; color: #1890ff;" />
            <p>SearchOutlined</p>
          </div>
          <div class="icon-item">
            <h4>Iconify 图标</h4>
            <Icon icon="material-symbols:search" style="font-size: 24px; color: #1890ff;" />
            <p>material-symbols:search</p>
          </div>
        </div>
      </div>

      <div class="icon-section">
        <h3>➕ 添加图标对比</h3>
        <div class="icon-comparison">
          <div class="icon-item">
            <h4>Ant Design 图标</h4>
            <PlusOutlined style="font-size: 24px; color: #52c41a;" />
            <p>PlusOutlined</p>
          </div>
          <div class="icon-item">
            <h4>Iconify 图标</h4>
            <Icon icon="material-symbols:add" style="font-size: 24px; color: #52c41a;" />
            <p>material-symbols:add</p>
          </div>
        </div>
      </div>

      <div class="icon-section">
        <h3>🗑️ 删除图标对比</h3>
        <div class="icon-comparison">
          <div class="icon-item">
            <h4>Ant Design 图标</h4>
            <DeleteOutlined style="font-size: 24px; color: #ff4d4f;" />
            <p>DeleteOutlined</p>
          </div>
          <div class="icon-item">
            <h4>Iconify 图标</h4>
            <Icon icon="material-symbols:delete" style="font-size: 24px; color: #ff4d4f;" />
            <p>material-symbols:delete</p>
          </div>
        </div>
      </div>

      <div class="icon-section">
        <h3>📤 导入导出图标对比</h3>
        <div class="icon-comparison">
          <div class="icon-item">
            <h4>Ant Design 图标</h4>
            <div style="display: flex; gap: 16px;">
              <ImportOutlined style="font-size: 24px; color: #722ed1;" />
              <ExportOutlined style="font-size: 24px; color: #722ed1;" />
            </div>
            <p>ImportOutlined / ExportOutlined</p>
          </div>
          <div class="icon-item">
            <h4>Iconify 图标</h4>
            <div style="display: flex; gap: 16px;">
              <Icon icon="material-symbols:upload" style="font-size: 24px; color: #722ed1;" />
              <Icon icon="material-symbols:download" style="font-size: 24px; color: #722ed1;" />
            </div>
            <p>material-symbols:upload / download</p>
          </div>
        </div>
      </div>

      <div class="icon-section">
        <h3>🎨 更多精美图标示例</h3>
        <div class="icon-grid">
          <div class="icon-item">
            <Icon icon="material-symbols:person" style="font-size: 32px; color: #1890ff;" />
            <p>person</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:team-dashboard" style="font-size: 32px; color: #52c41a;" />
            <p>team-dashboard</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:settings" style="font-size: 32px; color: #faad14;" />
            <p>settings</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:analytics" style="font-size: 32px; color: #722ed1;" />
            <p>analytics</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:star" style="font-size: 32px; color: #fa8c16;" />
            <p>star</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:trophy" style="font-size: 32px; color: #fadb14;" />
            <p>trophy</p>
          </div>
        </div>
      </div>

      <div class="icon-section">
        <h3>🎮 游戏相关图标</h3>
        <div class="icon-grid">
          <div class="icon-item">
            <Icon icon="material-symbols:sports-esports" style="font-size: 32px; color: #1890ff;" />
            <p>sports-esports</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:leaderboard" style="font-size: 32px; color: #52c41a;" />
            <p>leaderboard</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:military-tech" style="font-size: 32px; color: #faad14;" />
            <p>military-tech</p>
          </div>
          <div class="icon-item">
            <Icon icon="material-symbols:shield" style="font-size: 32px; color: #722ed1;" />
            <p>shield</p>
          </div>
        </div>
      </div>

      <div class="usage-info">
        <a-alert
          message="使用方法"
          description="只需要使用 <Icon icon='图标名称' /> 即可，支持所有 Iconify 图标库中的图标。可以通过 style 属性设置大小和颜色。"
          type="info"
          show-icon
        />
        <div style="margin-top: 16px;">
          <a-button type="link" @click="openIconifyWebsite">
            🌐 浏览更多图标
          </a-button>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { SearchOutlined, PlusOutlined, DeleteOutlined, ImportOutlined, ExportOutlined } from '@ant-design/icons-vue'

const openIconifyWebsite = () => {
  window.open('https://icon-sets.iconify.design/', '_blank')
}
</script>

<style scoped>
.iconify-demo {
  padding: 20px;
}

.demo-card {
  max-width: 800px;
  margin: 0 auto;
}

.icon-section {
  margin-bottom: 32px;
}

.icon-section h3 {
  margin-bottom: 16px;
  color: #1890ff;
}

.icon-comparison {
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: center;
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
  justify-items: center;
}

.icon-item {
  text-align: center;
  padding: 16px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.icon-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.icon-item h4 {
  margin-bottom: 12px;
  color: #262626;
}

.icon-item p {
  margin-top: 8px;
  font-size: 12px;
  color: #8c8c8c;
}

.usage-info {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

@media (max-width: 768px) {
  .icon-comparison {
    flex-direction: column;
    gap: 16px;
  }
  
  .icon-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
  }
}
</style>
